<mat-card>
  <mat-card-content>

    <div class="row">

      <div class="col-xl-7 col-lg-6 col-md-5 col-sm-6 col-12">
        <h3 class="fw-bold">Plugins</h3>
        <p class="text-muted">Install new plugins to extend your cloudlet or manage existing plugins</p>
      </div>

      <div
        class="col-xl-5 col-lg-6 col-md-7 col-sm-6 col-12">
        <app-filter
          (filterList)="filterList($event)">
        </app-filter>
      </div>

      <div class="col-12 mt-md-0 mt-4">

        <!-- Loading skeleton displayed when system is waiting for data from the backend -->
        <ng-container *ngIf="isLoading">
          <app-loading-skeleton
            [amount]="9"
            [colClass]="'col-4 mb-3'"
            [blockHeight]="'180px'"
            [hasShadow]="false">
          </app-loading-skeleton>
        </ng-container>

        <!-- List of plugins available, and/or already installed in the system -->
        <div class="row mt-3" *ngIf="!isLoading">

          <div
            class="col-lg-4 col-md-6 col-12 mb-4 plugin"
            *ngFor="let item of getPluginsToDisplay()">

            <mat-card class="w-100 h-100 p-3">

              <p class="type-of-plugin">{{item.type}}</p>

              <h3>{{item.name}}</h3>

              <p class="line-truncate text-muted mt-3 mb-4">
                {{item.intro}}
              </p>

              <div class="d-flex justify-content-end">

                <button
                  mat-button
                  class="me-2"
                  (click)="viewAppDetails(item)">
                  Details
                </button>

                <button
                  mat-flat-button
                  color="primary"
                  class="px-5"
                  *ngIf="item.installed === false"
                  (click)="install(item)">
                  Install
                </button>

                <button
                  mat-button
                  class="px-5"
                  *ngIf="item.installed === true"
                  (click)="install(item)">
                  Reinstall
                </button>

              </div>

            </mat-card>

          </div>

        </div>

      </div>
    </div>

  </mat-card-content>
</mat-card>
